<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/base.css">
    <script src="./js/common.js"></script>
    <script src="./js/vue.js"></script>
    <script src="./js/jquery-1.8.0.min.js"></script>
    <title>电影详情</title>
    <style>
        [v-cloak] {
            display: none;
        }

        .tip-box {
            background-color: rgba(0,0,0,0.6);
            padding: 10px 20px;
            width: 100px;
            height: 40px;
            z-index: 1000;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            line-height: 40px;
            color: white;
            animation-name: showTip;
            animation-iteration-count: 1;
            /* animation-duration: 3s; */
            opacity: 0;
        }

        @keyframes showTip {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        ;
    </style>
    <template id="navBar">
        <!-- 头部搜索框 start -->
        <nav class="nav-box">
            <div class="nav-input">
                <input type="text" @focus="showBtn=true" @blur="showBtn=false">
                <!-- <input type="text" @focus="changeShowBtn(true)" @blur="changeShowBtn(false)"> -->
            </div>
            <div v-show="showBtn" class="nav-btn">
                <span>搜索</span>
            </div>
        </nav>
        <!-- 头部搜索框 end -->
    </template>
    <template id="commentItem">
        <!-- 用户评论 start -->
        <div class="comment-item">
            <div class="user-img">
                <img :src="`./imgs/users/${comments.userImg}`">
            </div>
            <div class="user-info">
                <div class="user-name">
                    <span>{{comments.username}}</span>
                    <div class="film-source">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">{{comments.userSource|getSource}}</span>
                    </div>
                </div>
                <div class="user-time">{{comments.createTime}}</div>
            </div>
            <div class="user-conent">{{comments.userMsg}}</div>
        </div>
        <!-- 用户评论 end -->
    </template>
    <template id="bottomBar">
        <!-- 底部评论区 start -->
        <footer class="footer-box">
            <div class="comment-input" @click="showCommentBtn=true">不想说点什么吗？</div>
            <!-- <div v-show="showCommentBtn" class="comment-detail" @click.self="showCommentBtn=false"> -->
            <div v-show="showCommentBtn" class="comment-detail" @click="showCommentBtn=false">
                <!-- <div class="user-input"> -->
                <div class="user-input" @click.stop>
                    <h4>头像</h4>
                    <ul class="user-head" @click.capture.stop="userChoose($event)">
                        <li :class="{'user-choose':userComments.userImg==`user${item}.png`}"
                            :data-img="`user${item}.png`" :style="`background-image: url(./imgs/users/user${item}.png)`"
                            v-for="(item,index) in 24" :key="index">
                        </li>
                    </ul>
                    <h4>昵称</h4>
                    <input class="user-nikename" type="text" placeholder="昵称" v-model="userComments.userName">
                    <h4>评分</h4>
                    <div class="film-source reset-star">
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img open"></span>
                        <span class="star-img close"></span>
                        <span class="star-img close"></span>
                        <span class="star-source">7.9</span>
                    </div>
                    <h4>评论</h4>
                    <textarea class="user-message" placeholder="留下点足迹..." v-model="userComments.userMsg"></textarea>
                    <div class="send-btn">
                        <span @click="showCommentBtn=false">关闭</span>
                        <span @click="sendComment()">发送</span>
                    </div>
                </div>
            </div>
        </footer>
        <!-- 底部评论区 end -->
    </template>
    <!-- 全局弹出框 -->
    <template id="tip">
        <div class="tip-box" :style="`animation-duration:${time}s;`">
            {{msg}}
        </div>
    </template>
    <template id="commentList">
        <div>
            <!-- 用户评论 start -->
            <div class="comment-item" v-for="comment in comments" :key="comment.commentId">
                <div class="user-img">
                    <img :src="`./imgs/users/${comment.userImg}`">
                </div>
                <div class="user-info">
                    <div class="user-name">
                        <span>{{comment.username}}</span>
                        <div class="film-source">
                            <span class="star-img open"></span>
                            <span class="star-img open"></span>
                            <span class="star-img open"></span>
                            <span class="star-img close"></span>
                            <span class="star-img close"></span>
                            <span class="star-source">{{comment.userSource|getSource}}</span>
                        </div>
                    </div>
                    <div class="user-time">{{comment.createTime}}</div>
                </div>
                <div class="user-conent">{{comment.userMsg}}</div>
            </div>
            <!-- 用户评论 end -->
        </div>
    </template>
    <script>
        Vue.filter("getSource", function (arg) {
            return (arg * 1).toFixed(1) == "0.0" ? "暂无评分" : (arg * 1).toFixed(1);
        });
        const Tips=Vue.extend({
            template:"#tip",
            data(){
                return{
                    msg:"",
                    time:3
                }
            },
            created() {
                // console.log(this.$el);
                this.$mount();
                // console.log(this.$el);
            },
            mounted(){
                document.body.appendChild(this.$el);
                setTimeout(()=>{
                    this.$destroy();
                    document.body.removeChild(this.$el);
                },this.time*1000);
            },
            beforeUpdate() {
            },
        });
        // Vue.component("showTip",Tips);
        // function showTip(msg='默认值',time=3) {
        //     let Tip=new Tips();
        //     Tip.msg=msg;
        //     Tip.time=time;
        // };
        window.onload = function () {
            new Vue({
                el: ".app",
                components: {
                    NavBar: {
                        template: "#navBar",
                        data() {
                            return {
                                showBtn: false
                            }
                        },
                        methods: {
                            changeShowBtn(arg) {
                                // console.log(arg);
                                this.showBtn = arg;
                            }
                        }
                    },
                    CommentItem: {
                        template: "#commentItem",
                        props:{
                            comments:{
                                type:Object,
                                default(){
                                    return {}
                                }
                            }
                        }
                    },
                    BottomBar: {
                        template: "#bottomBar",
                        data() {
                            return {
                                showCommentBtn: false,
                                userComments: {
                                    userImg: "user1.png",
                                    userName: "",
                                    userSource: 7,
                                    userMsg: ""
                                },
                                filmDetail: {}
                            }
                        },
                        methods: {
                            userChoose(arg) {
                                // console.log(arg.target.dataset.img);
                                this.userComments.userImg = arg.target.dataset.img ? arg.target.dataset.img : this.userComments.userImg;
                            },
                            loadDetail() {
                                $.ajax({
                                    url: "http://127.0.0.1:8090/filmApi/loadFilmById.php",
                                    type: "post",
                                    dataType: "json",
                                    data: {
                                        filmId: 1292052
                                    },
                                    success: ({ result }) => {
                                        this.filmDetail = result;
                                        this.$emit("film-detail", this.filmDetail);
                                    }
                                });
                            },
                            showTip(msg="默认值",time=3){
                                let Tip=new Tips();
                                Tip.msg=msg;
                                Tip.time=time;
                            },
                            sendComment() {
                                $.ajax({
                                    url: "http://127.0.0.1:8090/filmApi/addComment.php",
                                    type: "post",
                                    dataType: "json",
                                    data: {
                                        ...this.userComments,
                                        filmId: 1292052
                                    },
                                    success: (res) =>{
                                        // console.log(res);
                                        if(res.resultState){
                                            this.showTip(res.msg);
                                        }else{
                                            this.showTip(res.msg);
                                        };
                                    }
                                })
                                // this.$emit("user-comment",{
                                //     ...this.userComments,
                                //     userTime:new Date().toLocaleString()
                                // });
                                this.userComments = {
                                    userImg: "user1.png",
                                    userName: "",
                                    userSource: 7,
                                    userMsg: ""
                                };
                                this.showCommentBtn = false;
                            }
                        },
                        mounted() {
                            this.loadDetail();
                            // console.log(Tips);
                        }
                    },
                    CommentList:{
                        template:"#commentList",
                        props:{
                            comments:{
                                type:Array,
                                default(){
                                    return []
                                }
                            }
                        }
                    }
                },
                data: {
                    filmDetail: {},
                    castList: [],
                    userComments: [],
                },
                methods: {
                    getFilmDetail(arg) {
                        this.filmDetail = arg;
                        this.castList = JSON.parse(this.filmDetail.castList);
                    },
                    // getUserComment(arg){
                    //     this.userComments.unshift(arg);
                    // }
                    loadComment(){
                        $.ajax({
                            url:"http://127.0.0.1:8090/filmApi/loadComments.php",
                            type:"post",
                            dataType:"json",
                            data:{
                                filmId:1292052
                            },
                            success:({result})=>{
                                this.userComments=result;
                            }
                        });
                    }
                },
                mounted(){
                    this.loadComment();
                }
            });
        };
    </script>
</head>

<body>
    <!-- 项目容器 start-->
    <div class="app" v-cloak>
        <!-- 头部搜索框 start -->
        <nav-bar></nav-bar>
        <!-- 头部搜索框 end -->
        <!-- 首页正文 start -->
        <div class="content-box">
            <!-- 电影详情 start -->
            <div class="detail-box">
                <!-- 电影名称 -->
                <div class="film-name">{{filmDetail.filmName}}</div>
                <!-- 电影信息 stat-->
                <div class="film-info">
                    <div class="film-tip">
                        <div class="comment-count">
                            <div class="film-source">
                                <span class="star-img open"></span>
                                <span class="star-img open"></span>
                                <span class="star-img open"></span>
                                <span class="star-img close"></span>
                                <span class="star-img close"></span>
                                <span class="star-source">{{filmDetail.source|getSource()}}</span>
                            </div>
                            <div class="star-count">93601短评</div>
                        </div>
                        <div class="film-desc">
                            <p>
                                <span>上映时间:</span>{{filmDetail.filmYear}}</p>
                            <p>
                                <span>电影类型:</span>{{filmDetail.filmTypes}}</p>
                            <p>
                                <span>参演明星:</span>{{filmDetail.castNames}}</p>
                        </div>
                    </div>
                    <div class="film-img" style="background-image: url('./imgs/timg.jpg');background-position:40% 50%;">
                    </div>
                </div>
                <!-- 电影信息 end-->
                <!-- 电影简介 start -->
                <div class="film-plot">
                    <div class="plot-title">剧情简介</div>
                    <div class="plot-content">
                        {{filmDetail.filmDesc}}
                    </div>
                </div>
                <!-- 电影简介 end -->
                <!-- 演员阵容 start -->
                <div class="film-actor">
                    <div class="actor-title">导演演员</div>
                    <div class="actor-list">
                        <div class="actor-item" v-for="(item,index) in castList" :key="index">
                            <div class="actor-img"
                                :style="`background-image: url('./imgs/timg.jpg');background-position:40% 50%;`"></div>
                            <div class="actor-name">{{item.name}}</div>
                        </div>
                    </div>
                </div>
                <!-- 演员阵容 end -->
                <!-- 电影评论 start -->
                <div class="film-comments">
                    <div class="comment-title">相关评论</div>
                    <!-- <div class="comment-list">
                        <comment-item v-for="(comments,index) in userComments" :key="comments.commentId" :comments="comments"></comment-item>
                    </div> -->
                    <comment-list class="comment-list" :comments="userComments"></comment-list>
                </div>
                <!-- 电影评论 end -->
            </div>
            <!-- 电影详情 end -->
        </div>
        <!-- 首页正文 end -->
        <!-- <bottom-bar @film-detail="getFilmDetail" @user-comment="getUserComment"></bottom-bar> -->
        <bottom-bar @film-detail="getFilmDetail"></bottom-bar>
    </div>
    <!-- 项目容器 end-->
</body>

</html>